/**
 * 初始化页面header部分中商品列表
 */
$(document).ready(function () {
    //初始化页面
    //其他初始化
    let obj = new Object();
    obj.m = "list";
    //初始化商品类型
    $.ajax({
        //请求方式 同步false 异步true
        async: true,
        //请求方式
        type: "GET",
        //请求地址
        url: basePath + "/api/category?m=list",
        //返回值类型
        data: obj,
        dataType: "json",
        //成功之后的回调函数
        success: function (result) {
            console.log(result);
            initCategoryLi(result);
        },
        //请求失败，包含具体的错误信息
        error: function (e) {
            console.log(e.status);
            console.log(e.responseText);
        }
    });

    let merchanObj = new Object();
    merchanObj.m = "getMerchListBySpecial";
    merchanObj.special = 0;
    //初始化商品
    $.ajax({
        //请求方式 同步false 异步true
        async: true,
        //请求方式
        type: "POST",
        //请求地址
        url: basePath + "/api/merchandise",
        //返回值类型
        data: merchanObj,
        dataType: "json",
        //成功之后的回调函数
        success: function (result) {
            console.log(result);
            initNewsMerchan(result);
        },
        //请求失败，包含具体的错误信息
        error: function (e) {
            console.log(e.status);
            console.log(e.responseText);
        }
    });
    let specialMerObj = new Object();
    specialMerObj.m = "getMerchListBySpecial";
    specialMerObj.special = 1;
    //初始化商品
    $.ajax({
        //请求方式 同步false 异步true
        async: true,
        //请求方式
        type: "POST",
        //请求地址
        url: basePath + "/api/merchandise",
        //返回值类型
        data: specialMerObj,
        dataType: "json",
        //成功之后的回调函数
        success: function (result) {
            initSpecialMerchan(result);
        },
        //请求失败，包含具体的错误信息
        error: function (e) {
            console.log(e.status);
            console.log(e.responseText);
        }
    });

    //绑定登录按钮事件
    $(".btnLogin").click(login);

    //绑定注册按钮事件  测试获得session中的值
    $(".btnRegister").click(register);
    //对特价更多做点击事件
    $("#moreSpecial").click(function () {
        location.href = "/html/merchandiseList.html?special=1";
    });
    //对新品更多做点击事件
    $("#moreNew").click(function () {
        location.href = "/html/merchandiseList.html?special=0"
    });
    initLoginView();
});

function initLoginView() {
    let obj = new Object();
    obj.m = "getLoginMember";
    $.ajax(
        {
            async: true,
            xhrFields: {
                withCredentials: true
            },
            type: "POST",
            url: basePath + "/api/member",
            data: obj,
            dataType: "json",
            success: function (result) {
                console.log(result);
                makeLoginView(result);
            },
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        }
    );
}

// 展示登录窗口信息
function makeLoginView(result) {
    if (result.code == 200) {
        //成功  存在登录信息
        let member = result.data;
        let txt = "";
        txt = txt + "<br>";
        txt = txt + "<span style='font-size:30px;color:green'>欢迎:" + member.memberName + "</span>";
        txt = txt + "<br>";
        txt = txt + "<span style='font-size:30px;color:green'>" + member.levelName + "</span>";
        txt = txt + "<p align='center'><button style='width: 100px;height: 30px' onclick='memberExit()'>安全退出</button></p>"
        $(".loginWrap").html(txt);
    }

}

function memberExit() {
    let obj = new Object();
    obj.m = 'exit';
    // ajax请求
    $.ajax(
        {
            async: true,
            xhrFields: {
                withCredentials: true
            },
            type: "POST",
            url: basePath + "/api/member",
            dataType: "json",
            data: obj,
            //成功之后,清空session,将页面重新跳转到index.html
            success: function (result) {
                console.log("清空session,yeah!")
                location.href = "/index.html";
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        }
    )

}

function register() {
    let obj = new Object();
    obj.m = "getLoginMember";
    //ajax请求
    $.ajax({
        //请求方式 同步false 异步true
        async: true,
        //Ajax请求设置xhrField的withCredentials为true实现跨域访问
        xhrFields: {
            withCredentials: true
        },
        //请求方式
        type: "POST",
        //请求地址
        url: basePath + "/api/member",
        //返回值类型
        data: obj,
        dataType: "json",
        //成功之后的回调函数
        success: function (result) {
            console.log(result);
        },
        //请求失败，包含具体的错误信息
        error: function (e) {
            console.log(e.status);
            console.log(e.responseText);
        }
    });

}

function login() {
    //用户名
    let loginName = $("#loginName").val();
    //密码
    let loginPwd = $("#loginPwd").val();
    let obj = new Object();
    obj.m = "login";
    obj.loginName = loginName;
    obj.loginPwd = loginPwd;

    //ajax请求
    $.ajax({
        //请求方式 同步false 异步true
        async: true,

        xhrFields: {
            withCredentials: true
        },
        //请求方式
        type: "POST",
        //请求地址
        url: basePath + "/api/member",
        //返回值类型
        data: obj,
        dataType: "json",
        //成功之后的回调函数
        success: function (result) {
            loginSuccess(result);
        },
        //请求失败，包含具体的错误信息
        error: function (e) {
            console.log(e.status);
            console.log(e.responseText);
        }
    });
}

function loginSuccess(result) {
    if (result.code == 200) {
        //登录成功
        console.log(result.msg);
        // 更新登录的div
        makeLoginView(result);
    } else {
        //登录失败
        console.log(result.msg);
        // 反馈登录失败信息
        //show() 方法显示隐藏的被选元素。
        $("#errLogin").show(1000);
        $("#loginName").focus();
    }

}


function initNewsMerchan(result) {
    $("#newsMerchant").html("");//清空内容
    $.each(result, function (index, element) {
        let div = $("<div></div>");
        div.addClass("merchant");
        let img1 = $("<img>");
        img1.attr("src", "/resources" + element.picture);
        img1.addClass("merchantImg");
        let br1 = $("<br>");
        let a = $("<a></a>").text(element.merName);
        a.attr("href", "#" + element.id);
        let br2 = $("<br>");
        let span1 = $("<span></span>").text("市场价:￥" + element.price);
        let br3 = $("<br>");
        let img2 = $("<img>").attr("src", "resources/images/icon_car.gif");
        let img3 = $("<img>").attr("src", "resources/images/icon_buy.gif");

        //img2,绑定跳转事件
        img2.bind("click", element.id, getMerchandiseDetail)
        //放置到div中
        div.append(img1, br1, a, br2, span1, br3, img2, img3);
        $("#newsMerchant").append(div);

    })

}


//初始化特价区
function initSpecialMerchan(result) {
    $("#specialMerchant").html("");//清空内容
    $.each(result, function (index, element) {
        let div = $("<div></div>");
        div.addClass("merchant");
        let img1 = $("<img>");
        img1.attr("src", "/resources" + element.picture);
        img1.addClass("merchantImg");
        let br1 = $("<br>");
        let a = $("<a></a>").text(element.merName);
        a.attr("href", "#" + element.id);
        let br2 = $("<br>");
        let span1 = $("<span></span>").text("市场价:￥" + element.price);
        let br3 = $("<br>");
        let span2 = $("<span></span>").text("特价:￥" + element.sprice);
        let br4 = $("<br>");
        let img2 = $("<img>").attr("src", "resources/images/icon_car.gif");
        let img3 = $("<img>").attr("src", "resources/images/icon_buy.gif");
        img2.bind("click", element.id, getMerchandiseDetail)
        //放置到div中
        div.append(img1, br1, a, br2, span1, br3, span2, br4, img2, img3);
        $("#specialMerchant").append(div);
    })

}
//获得商品详情
function getMerchandiseDetail(event) {
    let id = event.data;
    location.href = "/html/merchandiseDetail.html?id=" + id;
}

//商品加入购物车
function addShopCart(event) {
    let id = event.data;
    //处理业务
    let obj = new Object();
    obj.m = "add";
    obj.merId = id;
    //ajax请求
    $.ajax({
        //请求方式 同步false 异步true
        async: true,
        //Ajax请求设置xhrField的withCredentials为true实现跨域访问
        xhrFields: {
            withCredentials: true
        },
        //请求方式
        type: "POST",
        //请求地址
        url: basePath + "/api/auth/shopCar",
        //返回值类型
        data: obj,
        dataType: "json",
        //成功之后的回调函数
        success: function (result) {
            if (result.code == 505 || result.code == 506) {
                //跳转到请先进行登录页面
                location.href = "/html/notLoginView.html";
            } else if (result.code == 200) {
                //登录成功跳转,,商品购物车加入成功
                console.log(result);
                location.href = "/html/shopCarList.html";
            }

        },
        //请求失败，包含具体的错误信息
        error: function (e) {
            console.log(e.status);
            console.log(e.responseText);
        }
    });


}

//初始化商品类型下拉菜单
function initCategoryLi(result) {
    $(".categoryUl").html("");
    //遍历json数组
    $.each(result, function (index, element) {
        let li = $("<li></li>");
        let a = $("<a></a>").text(element.cateName);
        a.attr("href", "#" + element.id);
        li.append(a);
        $(".categoryUl").append(li);

    });

}

/**
 *
 * 1.jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
 jQuery 中所有选择器都以美元符号开头：$()。


 *2.JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

 *3.AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
 * */